<!--此组件为每个场景组件右下角的操作按钮---为公有组件-->
<template>
  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!designer}" :style="{display: displayStyle}">
    <div class="static-content-item"
         v-if="!field.options.hidden || (designState === true)"
         :style="{display: displayStyle}"
         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
      <slot></slot>
    </div>
    <template v-if="!!designer">
      <!--右下角的操作-->
      <div class="field-action" v-if="designer.selectedId === field.id">
        <i class="el-icon el-icon-back" title="选中父组件" @click.stop="selectParentWidget(field)"/>
        <i class="el-icon el-icon-top" title="上移组件" v-if="!!parentList && (parentList.length > 1)"
           @click.stop="moveUpWidget(field)"/>
        <i class="el-icon el-icon-bottom" title="下移组件" v-if="!!parentList && (parentList.length > 1)"
           @click.stop="moveDownWidget(field)"/>
        <i class="el-icon el-icon-delete" title="移除组件" @click.stop="removeFieldWidget"/>
        <i class="el-icon el-icon-full-screen" title="放大" @click.stop="fullScreenFieldWidget" v-if="false"/>
      </div>
      <!--左上角操作-->
      <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
        <i class="el-icon el-icon-rank" title="拖拽手柄"/>
        <i>{{(field.title) }}</i>
        <template v-if="(field.options.hidden)">
          <i class="iconfont icon-hide"/>
          <i>隐藏</i>
        </template>
      </div>
    </template>
  </div>
</template>


<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import SvgIcon from "@c/public/svg-icon/index.vue";

export default {
  name: "CompOperate",

  components: {
    SvgIcon
  },

  props: {
    field: Object,
    designer: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designState: {
      type: Boolean,
      default: false
    },
    displayStyle: {
      type: String,
      default: "block"
    },
    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ""
    },
  },

  data() {
    return {
      constantDic: constantDic
    };
  },

  computed: {
    selected() {
      return !!this.designer && this.field.id === this.designer.selectedId;
    },

    customClass() {
      return !!this.field.options.customClass ? this.field.options.customClass.join(" ") : "";
    },
  },

  methods: {
    // 选中组件
    selectField(field) {
      if (!!this.designer) {
        this.designer.setSelected(field);
        this.designer.emitEvent("field-selected", this.parentWidget);  //发送选中组件的父组件对象
      }
    },

    // 选择父级组件
    selectParentWidget() {
      if (this.parentWidget) {
        this.designer.setSelected(this.parentWidget);
      } else {
        this.designer.clearSelected();
      }
    },

    // 向上移动
    moveUpWidget() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
      this.designer.emitHistoryChange();
    },

    // 向下移动
    moveDownWidget() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList);
      this.designer.emitHistoryChange();
    },

    // 移除组件
    removeFieldWidget() {
      if (!!this.parentList) {
        const fieldRefName = this.designer.selectedWidgetName;
        const fieldWidgetInfo = this.designer.selectedWidget;

        let nextSelected = null;
        if (this.parentList.length === 1) {
          if (!!this.parentWidget) {
            nextSelected = this.parentWidget;
          }
        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
          nextSelected = this.parentList[this.indexOfParentList - 1];
        } else {
          nextSelected = this.parentList[this.indexOfParentList + 1];
        }

        this.$nextTick(() => {
          this.parentList.splice(this.indexOfParentList, 1);
          this.designer.setSelected(nextSelected);
          this.designer.formWidget.deleteWidgetRef(fieldRefName,fieldWidgetInfo);  //删除组件ref！！！
          this.designer.emitHistoryChange();
        });
      }
    },

    // 全屏幕显示
    fullScreenFieldWidget(){
      this.designer.fullScreenFieldWidget(this.parentList, this.indexOfParentList);
      this.designer.emitHistoryChange();
    }
  }
}
</script>

<style lang="scss" scoped>

.field-wrapper {
  position: relative;

  .field-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: auto;
    line-height: 22px;
    background: #409EFFFF;
    z-index: 9;

    i {
      font-size: 36px;
      color: #fff;
      margin: 2px 6px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: 0;
    left: -1px;
    height: auto;
    line-height: 20px;
    z-index: 9;
    background: #409EFFFF;

    i {
      font-size: 36px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }

    &:hover {
      background: #409EFFFF;
    }
  }
}

.field-action,
.drag-handler {
  :deep(.svg-icon) {
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
}

.static-content-item {
  min-height: 20px;
  display: flex; /* 垂直居中 */
  align-items: center; /* 垂直居中 */

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}

.el-form-item.selected,
.static-content-item.selected {
  outline: 2px solid #409EFFFF;
}
</style>